<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>logger</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12">
			<select class="form-control" @change="changeUrl">
				<option v-for="app in urls" :value="app.url">{{app.appName}}</option>
			</select>
		</div>
	</div>
	<div class="row" v-for="log in logs">
		<div class="col-xs-10">
			<input class="form-control" value="{{log.logger}}">
		</div>
		<div class="col-xs-2">
			<select class="form-control" @change="changeLevel">
				<option v-for="level in levels" value="{{log.logger}}={{level}}" :selected="level == log.level">{{level}}</option>
			</select>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-10">
			<input class="form-control" placeholder="input logger name" id="logger">
		</div>
		<div class="col-xs-2">
			<select class="form-control" @change="changeLevel">
				<option v-for="level in levels" value="={{level}}" :selected="level == ''">{{level}}</option>
			</select>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 text-center">
			{{logs.length}} loggers
		</div>
	</div>
<div>
</body>
<script src="https://cdn.staticfile.org/vue/1.0.18/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/0.7.0/vue-resource.js"></script>
<script type="text/javascript">
	new Vue({
		el : '.container-fluid',
		data: {
			logs: [{"logger":"ROOT","level":"DEBUG"}],
			url: 'log',
			appName: 'logserver',
			urls: [],
			levels: ['', 'DEBUG', 'INFO', 'WARN', 'ERROR', 'TRACE', 'ALL', 'OFF']
		},
		methods: {
			changeUrl: function(e){
				this.url = e.target.value;
				this.appName = e.target.options[e.target.selectedIndex].text;
				this.loggers();
			},
			changeLevel: function(e){
				var str = e.target.value;
				var loggerLevel = str.split('=');
				var logger = loggerLevel[0] || document.querySelector('#logger').value;
				if(!logger) return;
				var token = prompt('请输入密码：');
				this.$http({method:'GET', url:'log?type=loggers', params: {'appName':this.appName,'logger':logger,'level':loggerLevel[1],'token': token}}).then(function (response) {
					this.loggers();
				});
			},
			logger: function(){
				this.$http({method:'POST', url:'log?type=props&key=logger'}).then(function(response){
					let logger = response.data.logger //-Dlogger=logserver@/log,cms@https://cms.xlongwei.com/demo/log.json
					if(logger && logger.length > 0){
						let split = logger.split(',')
						for(let i in split){
							let nameUrl = split[i]
							if(nameUrl && nameUrl.indexOf('@') > 0){
								let pair = nameUrl.split('@')
								this.urls.push({"appName":pair[0],"url":pair[1]})
							}
						}
					}
					if(this.urls.length > 0){
						this.url = this.urls[0].url;
					}else{
						this.urls.push({"appName":"logserver","url":"/log"});
					}
				})
			},
			loggers: function(){
				this.$http({method:'GET', url:'log?type=loggers', params:{'appName':this.appName}}).then(function(response){
					this.logs = response.data.loggers;
				})
			}
		},
		ready: function(){
			this.logger();
			setTimeout(this.loggers, 1000);
		}
	})
</script>
</html>